import { useState } from 'react'
import { List, Switch } from 'antd-mobile'
import Nabar from '../../conpoment/Nabar'
import styles from './index.module.css'

function MessageSettings() {
  // 消息设置状态
  const [settings, setSettings] = useState({
    registration: true,        // 挂号通知
    medicalOrder: true,        // 医嘱订单通知
    hospitalization: true,     // 住院预交通知
    outpatientPayment: true,   // 便民门诊缴费通知
    doctorSuspension: true,    // 医生停诊通知
    outpatientReport: true,    // 门诊报告通知
    queueCalling: true,        // 排队叫号通知
    announcement: true         // 公告通知
  })

  const handleToggle = (key: keyof typeof settings) => {
    setSettings(prev => ({
      ...prev,
      [key]: !prev[key]
    }))
  }

  return (
    <div className={styles.page}>
      <Nabar title='消息设置' sticky={false} />
      
      <div className={styles.card}>
        <List>
          <List.Item
            extra={
                 <Switch defaultChecked />
            }
          >
            挂号通知
          </List.Item>
          
          <List.Item
            extra={
              <Switch
                checked={settings.medicalOrder}
                onChange={() => handleToggle('medicalOrder')}
              />
            }
          >
            医嘱订单通知
          </List.Item>
          
          <List.Item
            extra={
              <Switch
                checked={settings.hospitalization}
                onChange={() => handleToggle('hospitalization')}
              />
            }
          >
            住院预交通知
          </List.Item>
          
          <List.Item
            extra={
              <Switch
                checked={settings.outpatientPayment}
                onChange={() => handleToggle('outpatientPayment')}
              />
            }
          >
            便民门诊缴费通知
          </List.Item>
          
          <List.Item
            extra={
              <Switch
                checked={settings.doctorSuspension}
                onChange={() => handleToggle('doctorSuspension')}
              />
            }
          >
            医生停诊通知
          </List.Item>
          
          <List.Item
            extra={
              <Switch
                checked={settings.outpatientReport}
                onChange={() => handleToggle('outpatientReport')}
              />
            }
          >
            门诊报告通知
          </List.Item>
          
          <List.Item
            extra={
              <Switch
                checked={settings.queueCalling}
                onChange={() => handleToggle('queueCalling')}
              />
            }
          >
            排队叫号通知
          </List.Item>
          
          <List.Item
            extra={
              <Switch
                checked={settings.announcement}
                onChange={() => handleToggle('announcement')}
              />
            }
          >
            公告通知
          </List.Item>
        </List>
      </div>
    </div>
  )
}

export default MessageSettings
